@page "/world/{UserId}"
@using jiuyuan.Components.Pages
@using jiuyuan.数据.基础数据类
@using jiuyuan.数据.玩家类
@using jiuyuan.管理器
@using jiuyuan.服务
@using jiuyuan.数据.用户类
@using jiuyuan.数据.共享类
@inject IUserService UserService
@inject NavigationManager Navigation

<div id="world-page">
    <!-- 添加管理员通知组件 -->
    <管理员通知 />
    
    <!-- 顶部区域 -->
    <div class="world-header">
        <h1 class="world-title">小世界</h1>
        <div class="character-list">
            @if (userCharacters != null)
            {
                @foreach (var character in userCharacters)
                {
                    <div class="character-card @(currentCharacter?.Id == character.Id ? "active" : "")" @onclick="() => SelectCharacter(character)">
                        <div>角色名: @character.角色名</div>
                        <div>等级: @character.等级</div>
                    </div>
                }
            }
            <button class="create-character-btn" @onclick="CreateNewCharacter">创建角色</button>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="world-content">
        <!-- 左侧功能菜单 -->
        <div class="world-sidebar">
            <button class="sidebar-btn @(activePanel == "character" ? "active" : "")" @onclick="@(e => ShowPanel("character"))">角色数据</button>
            <button class="sidebar-btn @(activePanel == "skills" ? "active" : "")" @onclick="@(e => ShowPanel("skills"))">技能仓库</button>
            <button class="sidebar-btn @(activePanel == "inventory" ? "active" : "")" @onclick="@(e => ShowPanel("inventory"))">物品仓库</button>
            <button class="sidebar-btn @(activePanel == "backpack" ? "active" : "")" @onclick="@(e => ShowPanel("backpack"))">背包</button>
            <button class="sidebar-btn @(activePanel == "dungeons" ? "active" : "")" @onclick="@(e => ShowPanel("dungeons"))">副本</button>
            <button class="sidebar-btn @(activePanel == "world-map" ? "active" : "")" @onclick="@(e => ShowPanel("world-map"))">世界地图</button>
            <!-- 管理员标签页 - 仅管理员可见 -->
            @if (IsAdmin)
            {
                <button class="sidebar-btn @(activePanel == "admin" ? "active" : "")" @onclick="@(e => ShowPanel("admin"))">工作台</button>
            }
        </div>

        <!-- 右侧内容区域 -->
        <div class="world-main">
            <!-- 角色数据面板 -->
            <div class="content-panel @(activePanel == "character" ? "active" : "")" id="character-panel">
                <h2 class="panel-title">角色数据</h2>

                <div class="character-layout">
                    <!-- 左侧人物图片区域 -->
                    <div class="character-image-section">
                        <div class="character-portrait">
                            <div class="portrait-placeholder">
                                <span>上传角色图片</span>
                            </div>
                        </div>
                        <div class="avatar-upload">
                            <div class="avatar-circle">
                                <div class="avatar-placeholder">
                                    <span>头像</span>
                                </div>
                            </div>
                            <button class="upload-btn" @onclick="UploadAvatar">上传头像</button>
                        </div>
                        <!-- 在图片下方添加角色简要信息 -->
                        <div class="character-summary">
                            <div class="summary-item">
                                <span class="summary-label">生命值:</span>
                                <span class="summary-value">245/245</span>
                            </div>
                            <div class="summary-item">
                                <span class="summary-label">魔法值:</span>
                                <span class="summary-value">180/180</span>
                            </div>
                            <div class="summary-item">
                                <span class="summary-label">等级:</span>
                                <span class="summary-value">15</span>
                            </div>
                            <div class="summary-item">
                                <span class="summary-label">经验:</span>
                                <span class="summary-value">1250/2500</span>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧角色信息区域 -->
                    <div class="character-info-section">
                        <!-- 基础属性 -->
                        <h3 class="panel-subtitle">基础属性</h3>
                        <div class="stats-grid">
                            <div class="stat-card">
                                <div class="stat-name">力量</div>
                                <div class="stat-value">18</div>
                                <div class="stat-bonus">+2</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-name">敏捷</div>
                                <div class="stat-value">22</div>
                                <div class="stat-bonus">+3</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-name">智力</div>
                                <div class="stat-value">30</div>
                                <div class="stat-bonus">+15</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-name">耐力</div>
                                <div class="stat-value">15</div>
                                <div class="stat-bonus">+5</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-name">精神</div>
                                <div class="stat-value">12</div>
                                <div class="stat-bonus">+0</div>
                            </div>
                            <div class="stat-card">
                                <div class="stat-name">幸运</div>
                                <div class="stat-value">8</div>
                                <div class="stat-bonus">+0</div>
                            </div>
                        </div>

                        <!-- 角色信息 -->
                        <h3 class="panel-subtitle">角色信息</h3>
                        <div class="info-grid">
                            <div class="info-card">
                                <div class="info-name">职业</div>
                                <div class="info-value">元素法师</div>
                            </div>
                            <div class="info-card">
                                <div class="info-name">种族</div>
                                <div class="info-value">精灵</div>
                            </div>
                            <div class="info-card">
                                <div class="info-name">阵营</div>
                                <div class="info-value">中立</div>
                            </div>
                            <div class="info-card">
                                <div class="info-name">声望</div>
                                <div class="info-value">1250</div>
                            </div>
                            <div class="info-card">
                                <div class="info-name">公会</div>
                                <div class="info-value">魔法议会</div>
                            </div>
                            <div class="info-card">
                                <div class="info-name">称号</div>
                                <div class="info-value">火焰掌控者</div>
                            </div>
                        </div>

                        <!-- 技能槽 -->
                        <h3 class="panel-subtitle">技能槽</h3>
                        <div class="skill-slots-grid">
                            @if (currentCharacter?.游戏玩家?.技能列表 != null)
                            {
                                var skillList = currentCharacter.游戏玩家.技能列表.ToList();
                                for (int i = 0; i < Math.Min(skillList.Count, 5); i++)
                                {
                                    var skill = skillList[i];
                                    <div class="skill-slot">
                                        <div class="skill-icon">@GetSkillIcon(skill.元素类型)</div>
                                        <div class="skill-name">@skill.名称</div>
                                        <div class="skill-hotkey">快捷键: @(i + 1)</div>
                                    </div>
                                }
                            }
                            else
                            {
                                <div class="skill-slot">
                                    <div class="skill-icon">?</div>
                                    <div class="skill-name">未学习技能</div>
                                    <div class="skill-hotkey">快捷键: 1</div>
                                </div>
                            }
                        </div>

                        <!-- 装备 -->
                        <h3 class="panel-subtitle">装备</h3>
                        <div class="equipment-grid">
                            @if (currentCharacter?.游戏玩家?.装备列表 != null)
                            {
                                @foreach (var equip in currentCharacter.游戏玩家.装备列表)
                                {
                                    <div class="equipment-slot">
                                        <div class="slot-icon">@GetEquipIconByType(equip)</div>
                                        <div class="slot-name">@GetEquipSlotName(equip)</div>
                                        <div class="item-name">@equip.名称</div>
                                        <div class="item-stats">@GetEquipStats(equip.基础属性)</div>
                                    </div>
                                }
                            }
                            else
                            {
                                <div class="equipment-slot">
                                    <div class="slot-icon">?</div>
                                    <div class="slot-name">未装备</div>
                                    <div class="item-name">无装备</div>
                                    <div class="item-stats"></div>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>

            <!-- 技能仓库面板 -->
            <div class="content-panel @(activePanel == "skills" ? "active" : "")" id="skills-panel">
                <h2 class="panel-title">技能仓库</h2>
                <div class="items-grid">
                    @if (所有技能.Any())
                    {
                        @foreach (var skill in 所有技能)
                        {
                            <div class="item-card">
                                <div class="item-name">@skill.名称</div>
                                <div class="item-desc">@skill.描述</div>
                            </div>
                        }
                    }
                    else
                    {
                        <div class="item-card">
                            <div class="item-name">暂无技能</div>
                            <div class="item-desc">还没有创建技能</div>
                        </div>
                    }
                </div>
            </div>

            <!-- 物品仓库面板 -->
            <div class="content-panel @(activePanel == "inventory" ? "active" : "")" id="inventory-panel">
                <h2 class="panel-title">物品仓库</h2>
                <div class="items-grid">
                    @if (仓库物品.Any())
                    {
                        @foreach (var item in 仓库物品)
                        {
                            <div class="item-card">
                                <div class="item-icon">@GetItemIcon(item)</div>
                                <div class="item-name">@item.名称</div>
                                <div class="item-desc">@item.描述</div>
                                <div class="item-type">@GetItemType(item)</div>
                            </div>
                        }
                    }
                    else
                    {
                        <div class="item-card">
                            <div class="item-name">暂无物品</div>
                            <div class="item-desc">还没有获得任何物品</div>
                        </div>
                    }
                </div>
            </div>

            <!-- 背包面板 -->
            <div class="content-panel @(activePanel == "backpack" ? "active" : "")" id="backpack-panel">
                <h2 class="panel-title">背包</h2>
                <div class="items-grid">
                    @if (currentCharacter?.游戏玩家?.装备列表 != null && currentCharacter.游戏玩家.装备列表.Any())
                    {
                        @foreach (var item in currentCharacter.游戏玩家.装备列表)
                        {
                            <div class="item-card">
                                <div class="item-icon">@GetItemIcon(item)</div>
                                <div class="item-name">@item.名称</div>
                                <div class="item-desc">@item.描述</div>
                                <div class="item-type">@GetItemType(item)</div>
                            </div>
                        }
                    }
                    else
                    {
                        <div class="item-card">
                            <div class="item-name">背包为空</div>
                            <div class="item-desc">还没有装备任何物品</div>
                        </div>
                    }
                </div>
            </div>

            <!-- 副本面板 -->
            <div class="content-panel @(activePanel == "dungeons" ? "active" : "")" id="dungeons-panel">
                <h2 class="panel-title">副本</h2>
                <div class="dungeon-list">
                    @if (所有副本.Any())
                    {
                        @foreach (var dungeon in 所有副本)
                        {
                            <div class="dungeon-card" @onclick="() => EnterDungeonWithId(dungeon.Id.ToString())">
                                <div class="dungeon-level">等级 @dungeon.等级要求</div>
                                <div class="dungeon-name">@dungeon.名称</div>
                                <div class="dungeon-desc">@dungeon.描述</div>
                                <div class="dungeon-status status-available">可进入</div>
                            </div>
                        }
                    }
                    else
                    {
                        <div class="dungeon-card">
                            <div class="dungeon-level">-</div>
                            <div class="dungeon-name">暂无副本</div>
                            <div class="dungeon-desc">管理员还没有创建副本</div>
                            <div class="dungeon-status status-locked">不可用</div>
                        </div>
                    }
                </div>
            </div>

            <!-- 世界地图面板 -->
            <div class="content-panel @(activePanel == "world-map" ? "active" : "")" id="world-map-panel">
                <h2 class="panel-title">世界地图</h2>
                <div class="region-list">
                    <div class="region-card" @onclick="EnterRegion">
                        <div class="region-name">精灵森林</div>
                        <div class="region-desc">宁静的精灵家园，充满神秘与魔法。</div>
                        <div class="dungeon-status status-available">已探索</div>
                    </div>
                    <div class="region-card" @onclick="EnterRegion">
                        <div class="region-name">矮人山脉</div>
                        <div class="region-desc">雄伟的山脉，矮人王国的所在地。</div>
                        <div class="dungeon-status status-available">已探索</div>
                    </div>
                    <div class="region-card" @onclick="EnterRegion">
                        <div class="region-name">沙之沙漠</div>
                        <div class="region-desc">广袤的沙漠，隐藏着古老的秘密。</div>
                        <div class="dungeon-status status-available">已探索</div>
                    </div>
                    <div class="region-card" @onclick="EnterRegion">
                        <div class="region-name">冰封荒原</div>
                        <div class="region-desc">永恒的冰封之地，生存环境恶劣。</div>
                        <div class="dungeon-status status-locked">未探索</div>
                    </div>
                    <div class="region-card" @onclick="EnterRegion">
                        <div class="region-name">火山地带</div>
                        <div class="region-desc">活跃的火山区域，充满危险与机遇。</div>
                        <div class="dungeon-status status-locked">未探索</div>
                    </div>
                    <div class="region-card" @onclick="EnterRegion">
                        <div class="region-name">神秘群岛</div>
                        <div class="region-desc">散布在海洋中的群岛，传说有宝藏。</div>
                        <div class="dungeon-status status-locked">未探索</div>
                    </div>
                </div>
            </div>

            <!-- 管理员工作台面板 - 仅管理员可见 -->
            @if (IsAdmin)
            {
                <div class="content-panel @(activePanel == "admin" ? "active" : "")" id="admin-panel">
                    @* <h2 class="panel-title">管理员工作台</h2> *@
                    <管理员工作台 />
                </div>
            }
        </div>
    </div>
</div>

@code {
    [Inject]
    public IJSRuntime JS { get; set; } = null!;
    
    [Inject]
    public 配置加载器 配置加载器 { get; set; } = default!;
    
    [Parameter]
    public string UserId { get; set; } = "";
    
    // 用户角色列表
    private List<玩家角色> userCharacters = [];
    private 玩家角色? currentCharacter;
    
    // 当前激活的面板
    private string activePanel = "character";
    
    // 副本相关属性
    private bool isDungeonAvailable = true;
    private string currentPartyId = "";
    private bool isInParty = false;
    
    // 真实数据
    private List<技能配置> 所有技能 = [];
    private List<游戏元素> 所有装备 = [];
    private List<副本配置> 所有副本 = [];
    private List<游戏元素> 仓库物品 = []; // 添加仓库物品列表
    
    protected override async Task OnInitializedAsync()
    {
        // 初始化时加载用户角色
        await LoadUserCharacters();
        
        // 加载真实数据
        await LoadRealData();
    }
    
    // 加载真实数据
    private async Task LoadRealData()
    {
        try
        {
            // 加载技能数据
            所有技能 = await 配置加载器.获取所有技能();
            
            // 加载装备数据
            所有装备 = await 配置加载器.获取所有游戏元素();
            
            // 加载副本数据
            所有副本 = await 配置加载器.获取所有副本();
        }
        catch (Exception ex)
        {
            Console.WriteLine($"加载真实数据失败: {ex.Message}");
        }
    }
    
    // 加载用户角色
    private async Task LoadUserCharacters()
    {
        try
        {
            // 确保用户ID有效
            if (!string.IsNullOrEmpty(UserId) && Guid.TryParse(UserId, out var userId))
            {
                userCharacters = await UserService.获取用户角色列表(userId);
                if (userCharacters.Any())
                {
                    currentCharacter = userCharacters.First();
                    var user = await UserService.获取用户信息(userId);
                    if(user!=null) IsAdmin = user.是管理员;
                    
                    // 加载仓库物品
                    if (currentCharacter.游戏玩家 != null)
                    {
                        仓库物品 = currentCharacter.游戏玩家.仓库物品.ToList();
                    }
                }
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine($"加载用户角色失败: {ex.Message}");
        }
    }
    
    // 选择角色
    private void SelectCharacter(玩家角色 character)
    {
        currentCharacter = character;
        // 更新仓库物品
        if (currentCharacter.游戏玩家 != null)
        {
            仓库物品 = currentCharacter.游戏玩家.仓库物品.ToList();
        }
    }
    
    // 创建新角色
    private void CreateNewCharacter()
    {
        // 确保用户ID不为空
        if (!string.IsNullOrEmpty(UserId))
        {
            // 跳转到角色创建页面
            Navigation.NavigateTo($"/character-creation/{UserId}");
        }
        else
        {
            Console.WriteLine("用户ID为空，无法创建角色");
        }
    }
    
    // 切换面板方法
    private void ShowPanel(string panelName)
    {
        activePanel = panelName;
        StateHasChanged(); // 确保UI更新
    }

    // 上传头像
    private void UploadAvatar()
    {
        Console.WriteLine("上传头像");
        // 这里应该实现文件上传逻辑
    }

    // 进入副本
    private void EnterDungeon()
    {
        // 进入副本逻辑
        Console.WriteLine("进入副本");

        // 检查副本是否可进入
        if (isDungeonAvailable)
        {
            // 切换到探险页面
            JS.InvokeVoidAsync("eval", @"
                var worldPage = document.getElementById('world-page');
                if (worldPage) worldPage.style.display = 'none';

                var adventurePage = document.getElementById('adventure-page');
                if (adventurePage) {
                    adventurePage.style.display = 'flex';
                    // 初始化冒险页面数据
                    if (typeof window.initializeAdventure === 'function') {
                        window.initializeAdventure('古老神庙');
                    }
                }
            ");
        }
    }

    private void EnterDungeonWithId(string dungeonId)
    {
        // 进入副本逻辑
        Console.WriteLine($"进入副本 {dungeonId}");

        // 检查副本是否可进入
        if (isDungeonAvailable)
        {
            // 导航到探险页面，传递副本ID
            Navigation.NavigateTo($"/adventure/dungeon/{dungeonId}");
        }
    }

    // 进入区域
    private void EnterRegion()
    {
        // 进入区域逻辑
        Console.WriteLine("进入世界地图");

        // 导航到世界地图页面
        Navigation.NavigateTo("/adventure/world");
    }

    // 管理员相关属性
    private bool IsAdmin = false; 

    private string ActiveAdminTab = "dungeons";

    // 切换管理员标签页
    private void SwitchAdminTab(string tab)
    {
        ActiveAdminTab = tab;
        StateHasChanged(); // 确保UI更新
    }
    
    // 重新加载副本数据
    private async Task ReloadDungeonsData()
    {
        try
        {
            所有副本 = await 配置加载器.获取所有副本();

            await InvokeAsync(StateHasChanged); // 触发UI更新
        }
        catch (Exception ex)
        {
            Console.WriteLine($"重新加载副本数据失败: {ex.Message}");
        }
    }
    
    // 小队相关方法
    private async Task CreateParty()
    {
        // 创建小队的逻辑可以通过JavaScript调用ChatBox组件的方法来实现
        await JS.InvokeVoidAsync("eval", @"
            // 这里可以调用ChatBox组件的创建小队方法
            if (typeof window.createParty === 'function') {
                window.createParty();
            }
        ");
    }
    
    private async Task JoinParty(string partyId)
    {
        // 加入小队的逻辑
        currentPartyId = partyId;
        isInParty = true;
        
        await JS.InvokeVoidAsync("eval", $@"
            // 调用ChatBox组件的加入小队方法
            if (typeof window.joinParty === 'function') {{
                window.joinParty('{partyId}');
            }}
        ");
    }
    
    private async Task LeaveParty()
    {
        // 离开小队的逻辑
        if (!string.IsNullOrEmpty(currentPartyId))
        {
            await JS.InvokeVoidAsync("eval", $@"
                // 调用ChatBox组件的离开小队方法
                if (typeof window.leaveParty === 'function') {{
                    window.leaveParty('{currentPartyId}');
                }}
            ");
            
            currentPartyId = "";
            isInParty = false;
        }
    }
    
    // 进入指定ID的副本
    private void EnterDungeonWithId(Guid dungeonId)
    {
        Console.WriteLine($"进入副本: {dungeonId}");
        // 这里可以添加进入指定副本的逻辑
        EnterDungeon();
    }
    
    // 获取技能图标
    private string GetSkillIcon(元素属性类型 元素类型)
    {
        return 元素类型 switch
        {
            元素属性类型.火 => "🔥",
            元素属性类型.水 => "❄️",
            元素属性类型.风 => "💨",
            元素属性类型.土 => "⛰️",
            元素属性类型.物理 => "⚔️",
            _ => "💫"
        };
    }
    
    // 获取装备图标
    private string GetEquipIconByType(游戏元素 equip)
    {
        // 检查是否为装备物品
        if (equip is 游戏元素 装备物品 && 装备物品.装备槽位.HasValue)
        {
            return GetEquipIcon(装备物品.装备槽位.Value);
        }
        return "❓";
    }
    
    // 获取装备槽位名称
    private string GetEquipSlotName(游戏元素 equip)
    {
        if (equip is 游戏元素 装备物品 && 装备物品.装备槽位.HasValue)
        {
            return 装备物品.装备槽位.Value.ToString();
        }
        return "未知";
    }
    
    // 获取装备图标
    private string GetEquipIcon(object 槽位)
    {
        // 由于装备槽位枚举在装备管理器中定义，我们需要转换
        var slotName = 槽位.ToString();
        return slotName switch
        {
            "武器" => "⚔️",
            "头盔" => "👑",
            "胸甲" => "🧥",
            "护腿" => "👖",
            "靴子" => "👟",
            "项链" => "📿",
            "戒指1" => "💍",
            "戒指2" => "💍",
            "饰品" => "💎",
            _ => "❓"
        };
    }
    
    // 获取装备属性描述
    private string GetEquipStats(属性配置 属性)
    {
        var stats = new List<string>();
        if (属性.物理攻击 > 0) stats.Add($"+{属性.物理攻击} 攻击");
        if (属性.物理防御 > 0) stats.Add($"+{属性.物理防御} 防御");
        if (属性.生命值 > 0) stats.Add($"+{属性.生命值} 生命");
        if (属性.魔法值 > 0) stats.Add($"+{属性.魔法值} 魔法");
        if (属性.速度 > 0) stats.Add($"+{属性.速度} 速度");
        if (属性.幸运值 > 0) stats.Add($"+{属性.幸运值} 幸运");
        
        return string.Join(", ", stats);
    }
    
    // 获取物品图标
    private string GetItemIcon(游戏元素 item)
    {
        return item.类型 switch
        {
            物品类型.装备 => "🛡️",
            物品类型.技能书 => "📚",
            物品类型.道具 => "💊",
            物品类型.材料 => "🔨",
            _ => "📦"
        };
    }

    // 获取物品类型描述
    private string GetItemType(游戏元素 item)
    {
        return item.类型 switch
        {
            物品类型.装备 => "装备",
            物品类型.技能书 => "技能书",
            物品类型.道具 => "道具",
            物品类型.材料 => "材料",
            _ => "未知"
        };
    }
}

<style>
    /* 小世界页面样式 */
    #world-page {
        color: #fff;
        display: flex;
        flex-direction: column;
        height: 100vh;
        width: 100vw;
        background: radial-gradient(circle at 20% 30%, #1a1a3a 0%, #0a0a1a 100%);
        position: fixed;
        top: 0;
        left: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    /* 小世界顶部区域 */
    .world-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background-color: rgba(20, 20, 40, 0.8);
        border-bottom: 2px solid #4a2c8d;
        height: 70px;
    }

    .world-title {
        font-size: 1.8rem;
        color: #b19cd9;
        text-shadow: 0 0 10px rgba(177, 156, 217, 0.7);
        font-family: 'Georgia', serif;
    }

    .character-list {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .character-card {
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 8px;
        padding: 10px 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 150px;
    }

        .character-card:hover {
            background-color: rgba(40, 40, 80, 0.9);
            border-color: #6a0dad;
            box-shadow: 0 0 10px rgba(106, 13, 173, 0.5);
        }

        .character-card.active {
            background-color: rgba(60, 30, 100, 0.9);
            border-color: #b19cd9;
            box-shadow: 0 0 15px rgba(177, 156, 217, 0.7);
        }

    .create-character-btn {
        background: linear-gradient(to right, #4a2c8d, #6a0dad);
        border: none;
        border-radius: 8px;
        padding: 10px 15px;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
    }

        .create-character-btn:hover {
            background: linear-gradient(to right, #5a3c9d, #7a1ddd);
            box-shadow: 0 0 15px rgba(106, 13, 173, 0.7);
        }

    /* 小世界主内容区域 */
    .world-content {
        display: flex;
        flex: 1;
        overflow: hidden;
    }

    /* 小世界左侧功能区域 */
    .world-sidebar {
        width: 200px;
        background-color: rgba(20, 20, 40, 0.8);
        border-right: 2px solid #4a2c8d;
        padding: 20px 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .sidebar-btn {
        background-color: rgba(30, 30, 60, 0.8);
        border: none;
        border-radius: 0 8px 8px 0;
        padding: 15px 20px;
        color: #e0e0ff;
        text-align: left;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-right: 10px;
        font-size: 1rem;
        position: relative;
        overflow: hidden;
    }

        .sidebar-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(to bottom, #6a0dad, #b19cd9);
            transform: scaleY(0);
            transition: transform 0.3s ease;
        }

        .sidebar-btn:hover {
            background-color: rgba(40, 40, 80, 0.9);
            padding-left: 25px;
        }

            .sidebar-btn:hover::before {
                transform: scaleY(1);
            }

        .sidebar-btn.active {
            background-color: rgba(60, 30, 100, 0.9);
            padding-left: 25px;
        }

            .sidebar-btn.active::before {
                transform: scaleY(1);
            }

    /* 小世界右侧内容区域 */
    .world-main {
        flex: 1;
        padding: 20px;
        overflow: hidden;
        position: relative;
    }

    .content-panel {
        display: none;
        height: 100%;
        overflow: auto;
        padding: 15px;
        background-color: rgba(20, 20, 40, 0.5);
        border-radius: 8px;
        border: 1px solid #4a2c8d;
    }

        .content-panel.active {
            display: block;
        }

    .panel-title {
        font-size: 1.5rem;
        color: #b19cd9;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #4a2c8d;
    }

    .panel-subtitle {
        font-size: 1.2rem;
        color: #b19cd9;
        margin: 20px 0 15px 0;
        padding-bottom: 8px;
        border-bottom: 1px solid #4a2c8d;
    }

    /* 角色数据面板布局 */
    .character-layout {
        display: flex;
        gap: 20px;
        height: calc(100% - 60px);
    }

    .character-image-section {
        width: 350px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .character-info-section {
        flex: 1;
        overflow-y: auto;
        padding-right: 10px;
    }

    /* 人物肖像区域 */
    .character-portrait {
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 8px;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        background-image: linear-gradient(45deg, rgba(74, 44, 141, 0.3), rgba(106, 13, 173, 0.3));
    }

        .character-portrait:hover {
            background-color: rgba(40, 40, 80, 0.9);
            border-color: #6a0dad;
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(106, 13, 173, 0.4);
        }

    .portrait-placeholder {
        color: #a0a0e0;
        text-align: center;
        font-size: 1.1rem;
    }

    /* 角色简要信息 */
    .character-summary {
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 8px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .summary-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .summary-label {
        color: #a0a0e0;
        font-size: 0.9rem;
    }

    .summary-value {
        color: #e0e0ff;
        font-size: 1rem;
        font-weight: bold;
    }

    /* 头像上传区域 */
    .avatar-upload {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .avatar-circle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: rgba(30, 30, 60, 0.8);
        border: 2px solid #4a2c8d;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        flex-shrink: 0;
    }

        .avatar-circle:hover {
            background-color: rgba(40, 40, 80, 0.9);
            border-color: #6a0dad;
            transform: scale(1.05);
        }

    .avatar-placeholder {
        color: #a0a0e0;
        text-align: center;
        font-size: 0.8rem;
    }

    .upload-btn {
        background: linear-gradient(to right, #4a2c8d, #6a0dad);
        border: none;
        border-radius: 8px;
        padding: 10px 15px;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        flex: 1;
    }

        .upload-btn:hover {
            background: linear-gradient(to right, #5a3c9d, #7a1ddd);
            box-shadow: 0 0 10px rgba(106, 13, 173, 0.7);
        }

    /* 属性网格 */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .stat-card {
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 8px;
        padding: 15px;
        position: relative;
        transition: all 0.3s ease;
    }

        .stat-card:hover {
            background-color: rgba(40, 40, 80, 0.9);
            border-color: #6a0dad;
            transform: translateY(-3px);
        }

    .stat-name {
        color: #a0a0e0;
        font-size: 0.9rem;
    }

    .stat-value {
        color: #e0e0ff;
        font-size: 1.5rem;
        margin-top: 5px;
        font-weight: bold;
    }

    .stat-bonus {
        position: absolute;
        top: 10px;
        right: 10px;
        color: #4CAF50;
        font-size: 0.8rem;
        background-color: rgba(76, 175, 80, 0.2);
        padding: 2px 8px;
        border-radius: 10px;
    }

    /* 角色信息网格 */
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .info-card {
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 8px;
        padding: 15px;
        transition: all 0.3s ease;
    }

        .info-card:hover {
            background-color: rgba(40, 40, 80, 0.9);
            border-color: #6a0dad;
            transform: translateY(-3px);
        }

    .info-name {
        color: #a0a0e0;
        font-size: 0.9rem;
    }

    .info-value {
        color: #e0e0ff;
        font-size: 1.1rem;
        margin-top: 5px;
        font-weight: bold;
    }

    /* 技能槽网格 */
    .skill-slots-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .skill-slot {
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 8px;
        padding: 15px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

        .skill-slot:hover {
            background-color: rgba(40, 40, 80, 0.9);
            border-color: #6a0dad;
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(106, 13, 173, 0.3);
        }

    .skill-icon {
        font-size: 2rem;
        margin-bottom: 8px;
    }

    .skill-name {
        color: #e0e0ff;
        font-size: 1rem;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .skill-hotkey {
        color: #a0a0e0;
        font-size: 0.8rem;
    }

    /* 装备网格 */
    .equipment-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    /* 物品网格布局 */
    .items-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
        margin-top: 20px;
    }

    .item-card {
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 8px;
        padding: 15px;
        transition: all 0.3s ease;
        position: relative;
    }

        .item-card:hover {
            background-color: rgba(40, 40, 80, 0.9);
            border-color: #6a0dad;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(106, 13, 173, 0.3);
        }

    .item-icon {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 10px;
    }

    .item-name {
        color: #e0e0ff;
        font-size: 1.1rem;
        font-weight: bold;
        margin-bottom: 5px;
        text-align: center;
    }

    .item-desc {
        color: #a0a0e0;
        font-size: 0.9rem;
        margin-bottom: 10px;
        text-align: center;
    }

    .item-type {
        color: #b19cd9;
        font-size: 0.8rem;
        text-align: center;
        padding: 3px 8px;
        background-color: rgba(106, 13, 173, 0.3);
        border-radius: 10px;
        display: inline-block;
        margin: 0 auto;
    }
</style>